<template>
  <div class="z-quickentrance">
    <z-card :title="'快捷入口'" class="quick_room">
      <div class="qucik-item" v-for="item in list">
        <div class="icon" @click="goRouter(item.name)">
          <z-menuitem :is="item.icon" />
        </div>
        <div class="label">{{ item.label }}</div>
      </div>
    </z-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, type Component } from "vue";
import ZCard from "@/components/common/z-card.vue";
import ZMenuitem from "@/components/common/z-menuitem.vue";
import { IconUser } from "@arco-design/web-vue/es/icon";
import { useRouter } from "vue-router";
const router = useRouter();
interface QuickItem {
  label: string;
  icon: string | Component;
  url: string;
  name: string;
}

const list = [
  {
    name: "Gaode",
    label: "高德地图",
    icon: "iconfont icon-gaodeditu",
  },
  {
    name: "SystemUser",
    label: "用户管理",
    icon: IconUser,
  },
] as QuickItem[];

const goRouter = (name: string) => {
  router.push({
    name,
  });
};
</script>
<style scoped lang="less">
.z-quickentrance {
  .quick_room {
    margin-bottom: 20px;
  }
  :deep(.body) {
    display: flex;
    .qucik-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
      .icon {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        background-color: var(--color-fill-2);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 20px;
        transition: all 0.3s;
        &:hover {
          transform: translateY(-5px);
        }
        .iconfont {
          font-size: 22px;
        }
      }
      .label {
        margin-top: 5px;
      }
    }
  }
}
</style>
